<!DOCTYPE HTML>
<html>
<body>
    please open the console to look the test message
    <hr>
    <button onclick="engineio()">engineio</button>
    <button onclick="message()">message</button>
    <button onclick="engineClose()">close</button>
    <hr/>
    <button onclick="socketio()">socketio</button>
    <button onclick="emit()">emit</button>
    <button onclick="socketClose()">close</button>

</body>
<script src="https://cdn.staticfile.org/socket.io/2.2.0/socket.io.js"></script>
<script src="https://cdn.staticfile.org/engine.io-client/3.3.2/engine.io.js"></script>
<script>
    var engineObj;
    var socketObj;
    function engineio() {
        engineObj = new eio.Socket('/engineio', {
            transports: ['websocket'],
            path: "/engine.io"});

        engineObj.on('open', function(){
            console.log("open");
        });

        engineObj.on('message', function(data){
            console.log(data);
        });

        engineObj.on('close', function(data){
            console.log(data);
        });
    }

    function message(){
        engineObj.send("ffff");
    }

    function engineClose(){
        engineObj.close();
    }

    function socketio() {
        socketObj = io.connect('/socketio', {
            transports: ['websocket'],
            path: "/socket.io"
        });

        socketObj.on("connect", function (x) {
            console.log("connect")
        })
        socketObj.on("disconnect", function (x) {
            console.log("disconnect")
        })

        socketObj.on("show", function (x) {
            console.log("show " + x)
            return "show back"
        })

    }

    function emit() {
        socketObj.emit('hello', {testData: '123456'}, function(a){
            console.log(a)
        });
    }

    function socketClose(){
        socketObj.close();
    }

</script>
</html>

